package com.example.composestudy.part4

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.*

@Composable
fun ConstraintLayoutTest() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val (title, greet, time) = createRefs()
        Text(
            "ConstraintLayoutTest",
            modifier = Modifier.constrainAs(title) {
                top.linkTo(parent.top, margin = 16.dp)
                centerHorizontallyTo(parent)
            }
        )
        Text(
            "Hello World",
            modifier = Modifier.constrainAs(greet) {
                top.linkTo(title.bottom, margin = 10.dp)
                centerHorizontallyTo(parent)
            }
        )
        Text(
            "20230530-092632",
            modifier = Modifier.constrainAs(time) {
                bottom.linkTo(parent.bottom, margin = 16.dp)
                centerHorizontallyTo(parent)
            }
        )
    }
}

/**
 * 另一种实现形式
 */
@Composable
private fun ConstraintLayoutTest4() {
    val constraints = ConstraintSet {
        val title = createRefFor("title")
        val greet = createRefFor("greet")
        val time = createRefFor("time")
        constrain(title) {
            top.linkTo(parent.top, margin = 16.dp)
            centerHorizontallyTo(parent)
        }
        constrain(greet) {
            top.linkTo(title.bottom, margin = 10.dp)
            centerHorizontallyTo(parent)
        }
        constrain(time) {
            bottom.linkTo(parent.bottom, margin = 16.dp)
            centerHorizontallyTo(parent)
        }
    }
    ConstraintLayout(
        modifier = Modifier.fillMaxSize(),
        constraintSet = constraints,
    ) {
        Text(
            "ConstraintLayoutTest",
            modifier = Modifier.layoutId("title")
        )
        Text(
            "Hello World",
            modifier = Modifier.layoutId("greet")
        )
        Text(
            "20230531-105421",
            modifier = Modifier.layoutId("time")
        )
    }
}

/**
 * 第三种实现形式。【了解】
 */
@Composable
private fun ConstraintLayoutTest5() {
    val constraintJson = """
        {
            title: {
                top: ["parent", "top", 16],
                centerHorizontally: "parent"
            },
            greet: {
                top: ["title", "bottom", 10],
                centerHorizontally: "parent"
            },
            time: {
                bottom: ["parent", "bottom", 16],
                centerHorizontally: "parent"
            }
        }
    """.trimIndent()
    val constraints = ConstraintSet(constraintJson)
    ConstraintLayout(
        modifier = Modifier.fillMaxSize(),
        constraintSet = constraints,
    ) {
        Text(
            "ConstraintLayoutTest",
            modifier = Modifier.layoutId("title")
        )
        Text(
            "Hello World",
            modifier = Modifier.layoutId("greet")
        )
        Text(
            "20230531-111317",
            modifier = Modifier.layoutId("time")
        )
    }
}

@Composable
private fun ConstraintLayoutTest2() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val title = createRef()
        Text(
            "ConstraintLayoutTest",
            modifier = Modifier.constrainAs(title) {
                // 定位和加边距
                top.linkTo(parent.top, margin = 16.dp)

                // 水平居中显示 方式一
                // centerHorizontallyTo(parent)

                // 居中显示 方式二
                start.linkTo(parent.start)
                end.linkTo(parent.end)

                // 垂直居中
                // centerHorizontallyTo(parent)

                // 居中
                // centerTo(parent)
            }
        )
    }
}

@Composable
private fun ConstraintLayoutTest3() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val (one, two, three, four) = createRefs()
        Text(
            "固定大小",
            textAlign = TextAlign.Center,
            modifier = Modifier
                .constrainAs(one) {
                    top.linkTo(parent.top, margin = 10.dp)
                    centerHorizontallyTo(parent)
                    width = Dimension.value(100.dp)
                }.background(Color.Red)
        )
        Text(
            "包裹内容",
            textAlign = TextAlign.Center,
            modifier = Modifier
                .constrainAs(two) {
                    top.linkTo(one.bottom, margin = 10.dp)
                    centerHorizontallyTo(parent)
                    // 感觉不设置就是这个效果
                    // width = Dimension.wrapContent
                }.background(Color.Red)
        )
        Text(
            "与约束大小一致",
            textAlign = TextAlign.Center,
            modifier = Modifier
                // .padding(end = 100.dp) // 这样设置还是有点问题的
                .constrainAs(three) {
                    top.linkTo(two.bottom, margin = 10.dp)
                    start.linkTo(parent.start, margin = 36.dp)
                    end.linkTo(parent.end, margin = 36.dp)
                    width = Dimension.fillToConstraints
                }
                .background(Color.Red)
        )
        Text(
            "百分比",
            textAlign = TextAlign.Center,
            modifier = Modifier
                .constrainAs(four) {
                    top.linkTo(three.bottom, margin = 10.dp)
                    centerHorizontallyTo(parent)
                    width = Dimension.percent(0.618f)
                }.background(Color.Red)
        )

        val (test, test2) = createRefs()
        Text("test", modifier = Modifier.constrainAs(test) {
            top.linkTo(three.top)
            start.linkTo(three.end)
        })
        Text("test", modifier = Modifier.constrainAs(test2) {
            top.linkTo(four.top)
            start.linkTo(four.end)
        })
    }
}

@Composable
private fun GuideLinesTest() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        // createGuidelineFromStart 也可以传dp值
        val startLine = createGuidelineFromStart(0.2f)
        val one = createRef()
        Text(
            "one",
            modifier = Modifier
                .constrainAs(one) {
                    top.linkTo(parent.top, margin = 16.dp)
                    start.linkTo(startLine)
                }.background(Color.Red)
        )
    }
}

@Composable
private fun BarriersTest() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        var text1Value by remember { mutableStateOf("这是一个长文本") }
        var text2Value by remember { mutableStateOf("普通文本") }
        // createGuidelineFromStart 也可以传dp值
        val (text1, text2, button) = createRefs()
        val endBarrier = createEndBarrier(text1, text2, margin = 10.dp)
        Text(
            text1Value,
            modifier = Modifier
                .constrainAs(text1) {
                    top.linkTo(parent.top, margin = 16.dp)
                }
        )
        Text(
            text2Value,
            modifier = Modifier
                .constrainAs(text2) {
                    top.linkTo(text1.bottom, margin = 16.dp)
                }
        )
        Button(
            {
                val temp = text1Value
                text1Value = text2Value
                text2Value = temp
            },
            modifier = Modifier.constrainAs(button) {
                top.linkTo(text1.top)
                bottom.linkTo(text2.bottom)
                start.linkTo(endBarrier)
                height = Dimension.fillToConstraints
            }
        ) {
            Text("按钮")
        }
    }
}

private val chainStyleList = listOf(
    "Spread(默认)" to ChainStyle.Spread,
    "SpreadInside" to ChainStyle.SpreadInside,
    "Packed" to ChainStyle.Packed
)

@Composable
private fun ChainsTest() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val (text1, text2, text3, button, showText) = createRefs()
        Text(
            "text1",
            modifier = Modifier.constrainAs(text1) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        )
        Text(
            "text2",
            modifier = Modifier.constrainAs(text2) {
                top.linkTo(text1.top)
            }
        )
        Text(
            "text3",
            modifier = Modifier.constrainAs(text3) {
                top.linkTo(text1.top)
            }
        )
        var styleIndex by remember { mutableStateOf(0) }
        TextButton(
            onClick = {
                styleIndex = (styleIndex + 1) % chainStyleList.size
            },
            modifier = Modifier.constrainAs(button) {
                top.linkTo(text1.bottom, margin = 16.dp)
                centerHorizontallyTo(parent)
            }
        ) {
            Text("chainStyle = ${chainStyleList[styleIndex].first}")
        }
        createHorizontalChain(
            text1, text2, text3,
            chainStyle = chainStyleList[styleIndex].second
        )
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
//    ConstraintLayoutTest()
//     ConstraintLayoutTest4()
    ConstraintLayoutTest5()
//    ConstraintLayoutTest2()
//    ConstraintLayoutTest3()
//    GuideLinesTest()
//    BarriersTest()
//    ChainsTest()
}


